import React, { FC } from 'react'
import { Button, Space, Tooltip } from 'antd'
import { ActionCreators as UndoActionCreators } from 'redux-undo'
import {
  DeleteOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  CopyOutlined,
  BlockOutlined,
  UpOutlined,
  DownOutlined,
  UndoOutlined,
  RedoOutlined,
} from '@ant-design/icons'
import { useDispatch } from 'react-redux'
import {
  removeSelectedComponent,
  changeComponentHidden,
  toggleComponentLocked,
  copySelectedComponent,
  pasteComponent,
  moveComponent,
} from '../../../store/componentsReducer'
import useGetComponentsInfo from '../../../hooks/useGetComponentsInfo'
import useBindCanvasKeyPress from '../../../hooks/useBindCanvasKeyPress'

const EditToolbar: FC = () => {
  const dispatch = useDispatch()
  const { componentList, selectedId, selectedComponent, copiedComponent } = useGetComponentsInfo()
  const { isLocked, isHidden } = selectedComponent || {}

  // * 组件上移和下移
  const length = componentList.length
  const selectedIndex = componentList.findIndex(c => c.fe_id === selectedId)
  const isFirst = selectedIndex <= 0 //第一个==>不能上移
  const isLast = selectedIndex + 1 >= length //最后一个==>下移

  // TODO 删除组件
  function handleDelete() {
    dispatch(removeSelectedComponent())
  }

  // TODO 绑定快捷键
  useBindCanvasKeyPress()

  // TODO 隐藏组件
  function handleHidden() {
    dispatch(changeComponentHidden({ fe_id: selectedId, isHidden: isHidden }))
  }

  // TODO 锁定组件
  function handleLock() {
    dispatch(toggleComponentLocked({ fe_id: selectedId }))
  }

  // TODO 复制
  function copy() {
    dispatch(copySelectedComponent())
  }

  // TODO 粘贴
  function paste() {
    dispatch(pasteComponent())
  }

  // TODO 上移/下移
  function moveUp() {
    if (isFirst) return //已经是第一个了
    dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex - 1 }))
  }
  function moveDown() {
    if (isLast) return //已经是第一个了
    dispatch(moveComponent({ oldIndex: selectedIndex, newIndex: selectedIndex + 1 }))
  }

  // TODO 撤销
  function undo() {
    dispatch(UndoActionCreators.undo())
  }
  // TODO 重做
  function redo() {
    dispatch(UndoActionCreators.redo())
  }

  return (
    <Space>
      <Tooltip title="删除">
        <Button shape="circle" icon={<DeleteOutlined />} onClick={handleDelete}></Button>
      </Tooltip>
      <Tooltip title="隐藏">
        <Button shape="circle" icon={<EyeInvisibleOutlined />} onClick={handleHidden}></Button>
      </Tooltip>
      <Tooltip title="锁定">
        <Button
          shape="circle"
          icon={<LockOutlined />}
          onClick={handleLock}
          type={isLocked ? 'primary' : 'default'}
        ></Button>
      </Tooltip>
      <Tooltip title="复制">
        <Button shape="circle" icon={<CopyOutlined />} onClick={copy}></Button>
      </Tooltip>
      <Tooltip title="粘贴">
        <Button
          shape="circle"
          icon={<BlockOutlined />}
          onClick={paste}
          disabled={copiedComponent == null ? true : false}
        ></Button>
      </Tooltip>
      <Tooltip title="上移">
        <Button shape="circle" icon={<UpOutlined />} onClick={moveUp} disabled={isFirst}></Button>
      </Tooltip>
      <Tooltip title="下移">
        <Button
          shape="circle"
          icon={<DownOutlined />}
          onClick={moveDown}
          disabled={isLast}
        ></Button>
      </Tooltip>
      <Tooltip title="撤销">
        <Button shape="circle" icon={<UndoOutlined />} onClick={undo}></Button>
      </Tooltip>
      <Tooltip title="重做">
        <Button shape="circle" icon={<RedoOutlined />} onClick={redo}></Button>
      </Tooltip>
    </Space>
  )
}

export default EditToolbar
